<template>
	<view>
		<!-- 用户信息 -->
		<view class="user-info">
			<view v-if='isLogin'>
				<!-- 头像 -->
				<image @click="changeAvatar" class="avatar" :src="userInfo.avatarUrl" mode=""></image>
				<view class="nickname">{{userInfo.nickname}}</view>
			</view>
			<view v-else>
				<button type="default" @click="loginPage">登录/注册</button>
			</view>
		</view>
		<!-- 操作菜单 -->
		<view>
			<nav-cell text="个人信息维护" url="/pages/user-edit/user-edit">
				<image slot="icon" src="../../static/portray-color.png" mode=""></image>
			</nav-cell>
			<nav-cell text="关于我们" url="/pages/about/about">
				<image slot="icon" src="../../static/client-color.png" mode=""></image>
			</nav-cell>
		</view>
		<button type="danger" @click="logout">退出登录</button>
	</view>
</template>

<script>
	import NavCell from "../../components/nav-cell/nav-cell.vue"
	import {
		logout
	} from "../../api/user-api.js"
	import {
		mapState
	} from "vuex"
	
	import {uploadFile} from "../../utils/request.js"
	
	export default {
		components: {
			NavCell
		},
		data() {
			return {

			}
		},
		created() {
			console.log(this.isLogin)
		},
		computed: {
			...mapState({
				isLogin: "isLogin",
				userInfo: "userInfo"
			})
		},
		methods: {
			loginPage() {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			},
			changeAvatar() {
				//选择图片的api
				uni.chooseImage({
					count:1,
					success: (res) => {
						uploadFile({
							url:"/api/pcUser/updata/userAvatar",
							filePath: res.tempFilePaths[0],
							name:"file"
						}).then((uploadRes)=>{
								const data = JSON.parse(uploadRes.data);
								if(data.code ==0 ){
									this.$store.commit("changeLoginStatus",{
										isLogin:true,
										userInfo:data.userInfo
									})
								}else{
									uni.showModal({
										title:"图片上传失败",
										content: data.msg
									})
								}
							})
					}
				})
			},
			logout() {
				logout().then(res => {
					if (res.data.code == 0) {
						this.$store.commit("changeLoginStatus", {
							isLogin: false,
							userInfo: null
						})
					} else {
						uni.showModal({
							title: "退出登录失败",
							content: res.data.msg
						})
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.user-info {
		height: 400rpx;
		background-color: #e74c3c;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.avatar {
		border-radius: 50%;
		height: 120rpx;
		width: 120rpx;
	}

	.nickname {
		margin-top: 10rpx;
		text-align: center;
	}
</style>
